@use '../../../variables';
@use '../../variables.scss' as select-css-variables;

$block: '.#{variables.$ns}select-counter';

#{$block} {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: 4px;

    background-color: var(--g-color-base-generic);

    &__text {
        margin-inline: 4px;
        flex-grow: 1;
        text-align: center;
    }

    &_size_xl &__text {
        margin-inline: 6px;
    }

    &_size {
        &_s {
            border-radius: var(--g-border-radius-xs);
            height: 20px;
            min-width: 20px;
        }
        &_m {
            border-radius: var(--g-border-radius-s);
            height: 24px;
            min-width: 24px;
        }
        &_l {
            border-radius: var(--g-border-radius-m);
            height: 28px;
            min-width: 28px;
        }

        &_xl {
            border-radius: var(--g-border-radius-l);
            margin-inline: 4px;
            height: 36px;
            min-width: 36px;
        }
    }
}
